<template>
    <div>
        <h2>产品类别</h2>
        <div ref="chart" class="chart"></div>
    </div>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue'
import { useDebouncedResize } from '@/utils/hooks/useDebouncedResize'
import { useEChart } from '@/utils/hooks/useEchart'

const echarts = inject('echarts')
const axios = inject('axios')

const chart = ref(null)
const cateData = ref(null)

// 使用抽离的echarts Hook
const { initChart, disposeChart, getInstance, resizeChart } = useEChart()

const getCategoryData = async () => {
    const res = await axios.get('/four/data')
    console.log(res)
    cateData.value = res.data.data.chartData
}

onMounted(async () => {
    await getCategoryData()
    const option = {
        xAxis: {
            type: 'category',
            data: cateData.value.day,
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
            axisTick: {
                show: true, // 显示 Y 轴刻度线
                alignWithLabel: false, // 刻度线不与标签对齐
                length: 5, // 刻度线的长度，可以根据需要调整
                inside: false, // 刻度线向外突出
                lineStyle: {
                    color: '#fff', // 刻度线颜色
                },
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            //位置
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true, //设置包含坐标轴
        },
        legend: {
            top: 'top',
        },
        series: [
            {
                name: '服饰',
                type: 'bar',
                data: cateData.value.num.Chemicals,
                stack: 'total', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    show: true,
                    fontSize: 10,
                },
                emphasis: {
                    //高亮的图形样式和标签样式。
                    focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形。
                },
            },
            {
                name: '数码',
                type: 'bar',
                data: cateData.value.num.Clothes,
                stack: 'total', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    show: true,
                    fontSize: 10,
                },
                emphasis: {
                    //高亮的图形样式和标签样式。
                    focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形。
                },
            },
            {
                name: '家电',
                type: 'bar',
                data: cateData.value.num.Electrical,
                stack: 'total', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    show: true,
                    fontSize: 10,
                },
                emphasis: {
                    //高亮的图形样式和标签样式。
                    focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形。
                },
            },
            {
                name: '家居',
                type: 'bar',
                data: cateData.value.num.digit,
                stack: 'total', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    show: true,
                    fontSize: 10,
                },
                emphasis: {
                    //高亮的图形样式和标签样式。
                    focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形。
                },
            },
            {
                name: '日化',
                type: 'bar',
                data: cateData.value.num.gear,
                stack: 'total', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    show: true,
                    fontSize: 10,
                },
                emphasis: {
                    //高亮的图形样式和标签样式。
                    focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形。
                },
            },
        ],
    }
    initChart(echarts, chart, option)
})
</script>

<style lang="less" scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
}
.chart {
    /* 高度360 */
    height: 4.5rem;
}
</style>
